import { Stamp } from 'store';
import { getTimeStamp } from './utils';

type Props = {
  history: Stamp[];
  onlyLast: boolean;
};

const History = ({ history, onlyLast }: Props) =>
  !history?.length ?
  null :
  (
    <div className="overflow-x-auto">
      {history.slice(onlyLast ? -1 : 0).map(
        (stamp, stampIndex) => (
          <div key={stampIndex}>
            <b>{stamp.smoke.toString().padStart(4, '0')}</b>
            /
            <b>{stamp.temperature.toString().padStart(4, '0')}</b>
            &nbsp;
            <span className="opacity-50">
              {getTimeStamp(stamp.date)}
            </span>
          </div>
        )
      )}
    </div>
  );

export default History;
